<!--
 * @Author: 迷洛洛ywc
 * @Date: 2024-06-20 13:27:10
 * @LastEditors: 迷洛洛ywc
 * @LastEditTime: 2024-06-28 15:22:04
 * @Description: file content
-->
<template>
  <div class="addLandPage" :class="{
     'hasList': isList
  }">
    <addMap
      ref="addMap"
      @dataList="dataList"
      @toList="toList"
      :landList="landList"
      v-if="mapLoading"
      :baseGeo="baseGeo"
    ></addMap>
    <!-- 弹出层 -->
    <van-popup
        v-model="addShow"
        position="bottom"
        :close-on-click-overlay="false"
        :overlay="false"
        :closeable="false"
        :style="{ height: '28.5vw' }"
      >
        <div class="flexPopup">
          <div class="popupGrey">
            已选中 <span class="greenColor"> {{mapList.length}} </span>个地块，共 <span class="greenColor"> {{ count }} </span> 亩
          </div>
          <div class="formBtn">
            <van-button class="cancelBtn" type="primary" round @click="toNoList()">取消</van-button>
            <van-button class="submitBtn" type="primary" round @click="submit()">确定</van-button>
          </div>
        </div>
    </van-popup>
  </div>
</template>

<script>
import addMap from '@/components/addMapSelect'
import wx from 'weixin-js-sdk'

import {
  getLandListApi,
  getBaseInfoApi
} from '@/api/addLand'
import { Toast } from 'vant'
export default {
  name: 'ShuzhongtianH5AddLand',
  components: {
    addMap
  },

  data () {
    return {
      value: '',
      addShow: false,
      addForm: {
        geoInfo: '',
        baseId: 1,
        landName: '',
        landType: '',
        responsiblePerson: '',
        name: '',
        phone: null
      },
      typeId: 1,
      columns: [],
      loading: true,
      showPicker: false,
      baseId: 1,
      landList: [],
      mapLoading: false,
      baseGeo: '',
      landShow: true,
      isList: false, // 是否列表
      mapList: []
    }
  },

  mounted () {
    this.baseId = this.$route.query.baseId
    this.getLandList(this.baseId)
    document.title = '添加地块'
    // this.toDelete()
  },
  computed: {
    count () {
      let count = 0
      this.mapList.forEach((item) => {
        count += item.landArea
      })
      return Math.round(count * 100) / 100
    }
  },
  methods: {
    // 取消列表
    toNoList () {
      this.isList = false
      this.addShow = false
      this.$refs.addMap.changeList()
    },
    // 显示列表
    toList (list) {
      this.mapList = list
      if (list.length) {
        this.isList = true
        this.addShow = true
      } else {
        this.isList = false
        this.addShow = false
      }
    },
    // 展示已拥有地块
    async getLandList () {
      const res = await getLandListApi(this.baseId)
      this.landList = res.data
      console.log(this.landList)
      this.mapLoading = true
    },
    // 获取基地经纬度
    async getBaseInfo () {
      if (this.baseId) {
        const res = await getBaseInfoApi(this.baseId)
        this.baseGeo = res.data.baseGeo
      } else {
        console.log('请输入基地ID')
      }
    },
    // 地图数据给到表单
    dataList (e) {
      this.addForm.geoInfo = e.polygonSubmit
      this.addForm.geoCenter = e.polygonCenter
      this.addForm.landArea = e.area
      this.addForm.address = e.address
      this.addShow = true
    },
    onCancel () {
      Toast('取消')
      this.showPicker = false
      this.addShow = true
    },
    submit () {
      this.addForm.baseId = this.$route.query.baseId
      if (!this.mapList.length) {
        Toast('请选择地块')
        return
      }

      // const pages = wx.getCurrentPages()
      // const prevPage = pages[pages.length - 2]
      // prevPage.$vm.trace_source = { type: 9999999 }
      setTimeout(() => {
        // wx.miniProgram.navigateBack({
        //   delta: 1,
        //   success: function (e) {
        //     var page = wx.getCurrentPages()
        //     const prevPage = page[page.length - 1]
        //     prevPage.$vm.name = 9999999
        //     const prevPage1 = page[page.length - 2]
        //     prevPage1.$vm.name = 999999911
        //   }
        // })
        const landId = this.mapList.map(item => `${item.landId}`).join(',')
        const workLand = this.mapList.map(item => `${item.landName}`).join(',')
        const address = this.mapList[0].address
        console.log(address)
        if (Number(this.$route.query.is) === 2) {
          wx.miniProgram.redirectTo({ url: `/pagesAgriServe/nongjiNeedAdd/nongjiNeedAdd?landId=${landId}&address=${address}&workLand=${workLand}&area=${this.count}&isBack=2` })
          return
        }
        wx.miniProgram.redirectTo({ url: `/pagesAgriServe/nongjiServerAdd/nongjiServerAdd?landId=${landId}&address=${address}&workLand=${workLand}&area=${this.count}&isBack=1` })
      }, 500)
    }
  }
}
</script>
<style lang="scss" scoped>
.addLandPage {
  width: 375px;
  height: 100vh;
}
.tit {
  text-align: center;
  margin: 15px 0 24px 0;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 16px;
  color: #0a241b;
}
.addForm {
  .landType {
    display: flex;
    height: 44px;
    line-height: 44px;
    .typeLabel {
      margin-left: 15px;
      color: #646566;
      font-size: 14px;
      margin-right: 20px;
    }
    .type {
      width: 40px;
      height: 25px;
      margin: auto 5px;
      font-size: 12px;
      border: 1px solid #dad7d7;
      border-radius: 5px;
      color: #000;
      text-align: center;
      line-height: 25px;
      font-weight: 600;
    }
  }

  .typeActive {
    background: #00c586;
    color: #ffffff !important;
  }
}
.formBtnDelete {
  ::v-deep .van-button {
    width: 270px;
  }
  ::v-deep .van-icon-delete-o {
    font-size: 24px;
    margin-right: 5px;
  }
}
.redColor {
  color: #F53F3F
}
.hasLand {
  ::v-deep .drawButtonFlex {
    bottom: 49vh;
  }
  ::v-deep .van-overlay {

  }
}
.hasList {
  ::v-deep .drawButton {
    bottom: 110px;
  }
}
.listLand {
  padding: 12px 20px
}
.searchVant {
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 0;
  ::v-deep .van-search__action {
    padding: 0 0 0 2.13333vw;
    line-height: 1;
    color: #19B763;
    > div {
      display: flex;
      align-items: center;
    }
  }
  ::v-deep .van-icon-plus {
    margin-right: 5px;
    font-size: 18px
  }
  ::v-deep input::placeholder {
    color: #A2A4A7
  }
}
.listBox {
  border: 1px solid #F6F8FC;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 3px;
  display: flex;
  .listImg {
    width: 64px;
    margin-right: 12px;
  }
  .listInfo {
    .listTitie {
      font-size: 14px;
      font-weight: bold;
      margin-right: 10px
    }
    .listLabel {
      color: #fff;
      background: #19B763;
      border-radius: 2px;
      padding: 3px 6px;
      font-size: 12px;
      margin-right: 5px
    }
    .listTag {
      color: #7C7E83;
      background: #E8E9EA;
      border-radius: 2px;
      padding: 3px 6px;
      font-size: 12px;
    }
    .listArea {
      margin-top: 15px;
      font-size: 12px;
      color: #7C7E83
    }
  }
}
.dialogOver {
  z-index: 5001 !important;
}
.noData {
  text-align: center;
  padding-top: 100px;
  color: #7C7E83;
  font-size: 14px;
  > div {
    margin-top: -60px
  }
}
.flexPopup {
  .popupGrey {
    padding: 10px 15px;
    background: #E8E9EA;
    font-size: 14px;
  }
  .formBtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px 20px 20px;
    ::v-deep .van-button {
      height: 40px;
    }
  }
  ::v-deep .submitBtn {
    width: 232px;
  }
  ::v-deep .cancelBtn  {
    width: 93px;
    border-color: #19B763 !important;
    color: #19B763 !important;
    background: #fff !important;
  }
}
.greenColor {
  color: #19B763;
}
</style>
